<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="出库类型
" prop="outboundType">
        <el-select v-model="queryParams.outboundType" placeholder="请选择出库类型
" clearable>
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="流水号" prop="serialNumber">
        <el-input
          v-model="queryParams.serialNumber"
          placeholder="请输入流水号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="出库数据汇总" prop="sumOfOutboundData">
        <el-input
          v-model="queryParams.sumOfOutboundData"
          placeholder="请输入出库数据汇总"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物料列表" prop="materialList">
        <el-input
          v-model="queryParams.materialList"
          placeholder="请输入物料列表"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="出库产线" prop="outboundProductionLine">
        <el-input
          v-model="queryParams.outboundProductionLine"
          placeholder="请输入出库产线"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否替领" prop="substituteCollarOr">
        <el-input
          v-model="queryParams.substituteCollarOr"
          placeholder="请输入是否替领"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="被替领部门" prop="replacedDepartment">
        <el-input
          v-model="queryParams.replacedDepartment"
          placeholder="请输入被替领部门"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="替领原因" prop="reasonForSubstitution">
        <el-input
          v-model="queryParams.reasonForSubstitution"
          placeholder="请输入替领原因"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="出库原因" prop="outboundReason">
        <el-input
          v-model="queryParams.outboundReason"
          placeholder="请输入出库原因"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="照片" prop="photo">
        <el-input
          v-model="queryParams.photo"
          placeholder="请输入照片"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否寄冻" prop="sendFrozenGoods">
        <el-input
          v-model="queryParams.sendFrozenGoods"
          placeholder="请输入是否寄冻"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="调拨仓库" prop="transferWarehouse">
        <el-input
          v-model="queryParams.transferWarehouse"
          placeholder="请输入调拨仓库"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="寄冻仓库" prop="sendFrozenWarehouse">
        <el-input
          v-model="queryParams.sendFrozenWarehouse"
          placeholder="请输入寄冻仓库"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="销售订单编码" prop="salesOrderCode">
        <el-input
          v-model="queryParams.salesOrderCode"
          placeholder="请输入销售订单编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="销售出库单编号" prop="salesOutboundOrderNumber">
        <el-input
          v-model="queryParams.salesOutboundOrderNumber"
          placeholder="请输入销售出库单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="采购订单编号" prop="purchaseOrderNumber">
        <el-input
          v-model="queryParams.purchaseOrderNumber"
          placeholder="请输入采购订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="采购需求" prop="procurementRequirements">
        <el-input
          v-model="queryParams.procurementRequirements"
          placeholder="请输入采购需求"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单日期" prop="orderDate">
        <el-input
          v-model="queryParams.orderDate"
          placeholder="请输入订单日期"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预计到货日期" prop="expectedDeliveryDate">
        <el-input
          v-model="queryParams.expectedDeliveryDate"
          placeholder="请输入预计到货日期"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户名称" prop="cusName">
        <el-input
          v-model="queryParams.cusName"
          placeholder="请输入客户名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入产品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="生产订单编号" prop="proOrderNumber">
        <el-input
          v-model="queryParams.proOrderNumber"
          placeholder="请输入生产订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单日期" prop="proOrderDate">
        <el-input
          v-model="queryParams.proOrderDate"
          placeholder="请输入订单日期"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品需求总数(pcs-瓶/碗)" prop="totalProductDemand">
        <el-input
          v-model="queryParams.totalProductDemand"
          placeholder="请输入产品需求总数(pcs-瓶/碗)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品编码" prop="productCode">
        <el-input
          v-model="queryParams.productCode"
          placeholder="请输入产品编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="提交人所属部门" prop="submitterDept">
        <el-input
          v-model="queryParams.submitterDept"
          placeholder="请输入提交人所属部门"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="生产领料单编号" prop="proPickingCode">
        <el-input
          v-model="queryParams.proPickingCode"
          placeholder="请输入生产领料单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="外协加工编码" prop="outProcessCode">
        <el-input
          v-model="queryParams.outProcessCode"
          placeholder="请输入外协加工编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="供应商名称" prop="supplierName">
        <el-input
          v-model="queryParams.supplierName"
          placeholder="请输入供应商名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="供应商编码" prop="supplierCode">
        <el-input
          v-model="queryParams.supplierCode"
          placeholder="请输入供应商编码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="合计出库(件数)" prop="totalOutbound">
        <el-input
          v-model="queryParams.totalOutbound"
          placeholder="请输入合计出库(件数)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="零头求整(件数)" prop="zeroToWhole">
        <el-input
          v-model="queryParams.zeroToWhole"
          placeholder="请输入零头求整(件数)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发货出库客户" prop="deliveryOutboundCus">
        <el-input
          v-model="queryParams.deliveryOutboundCus"
          placeholder="请输入发货出库客户"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="物流平台" prop="logisticsPlatform">
        <el-input
          v-model="queryParams.logisticsPlatform"
          placeholder="请输入物流平台"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发货日期" prop="issuanceDate">
        <el-input
          v-model="queryParams.issuanceDate"
          placeholder="请输入发货日期"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="司机人名" prop="driversName">
        <el-input
          v-model="queryParams.driversName"
          placeholder="请输入司机人名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车牌号" prop="licensePlateNum">
        <el-input
          v-model="queryParams.licensePlateNum"
          placeholder="请输入车牌号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="司机联系电话" prop="driversContactPhoneNum">
        <el-input
          v-model="queryParams.driversContactPhoneNum"
          placeholder="请输入司机联系电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车型" prop="vehicleModel">
        <el-input
          v-model="queryParams.vehicleModel"
          placeholder="请输入车型"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="车辆备注" prop="vehicleRemarks">
        <el-input
          v-model="queryParams.vehicleRemarks"
          placeholder="请输入车辆备注"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户所属仓" prop="cusWarehouse">
        <el-input
          v-model="queryParams.cusWarehouse"
          placeholder="请输入客户所属仓"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="出库状态" prop="outboundStatus">
        <el-select v-model="queryParams.outboundStatus" placeholder="请选择出库状态" clearable>
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="确认出库时间" prop="confirmDeliveryTime">
        <el-input
          v-model="queryParams.confirmDeliveryTime"
          placeholder="请输入确认出库时间"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="出库确认人" prop="outboundPersonnel">
        <el-input
          v-model="queryParams.outboundPersonnel"
          placeholder="请输入出库确认人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="跟单状态" prop="trackingStatus">
        <el-select v-model="queryParams.trackingStatus" placeholder="请选择跟单状态" clearable>
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="跟单员" prop="tracker">
        <el-input
          v-model="queryParams.tracker"
          placeholder="请输入跟单员"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="跟单备注" prop="trackingRemarks">
        <el-input
          v-model="queryParams.trackingRemarks"
          placeholder="请输入跟单备注"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="部门状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择部门状态" clearable>
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['mes:wm:outbound:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['mes:wm:outbound:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['mes:wm:outbound:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-refresh"
              size="mini"
              @click="handleSync"
             v-hasPermi="['mes:wm:outbound:sync']"
            >数据同步</el-button>
            </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['mes:wm:outbound:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="outboundList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="" align="center" prop="sequenceNum" />
      <el-table-column label="_id" align="center" prop="outboundId" />
      <el-table-column label="出库类型" align="center" prop="outboundType" />


     <el-table-column prop="serialNumber" label="出库单号" width="180">
        <template slot-scope="scope">
            <span @click="handleSerialNumberClick(scope.row.serialNumber)" class="highlight-link">{{ scope.row.serialNumber }}</span>
        </template>
      </el-table-column>


      <el-table-column label="出库数据汇总" align="center" prop="sumOfOutboundData" />
      <el-table-column label="物料列表" align="center" prop="materialList" />
      <el-table-column label="出库产线" align="center" prop="outboundProductionLine" />
      <el-table-column label="是否替领" align="center" prop="substituteCollarOr" />
      <el-table-column label="被替领部门" align="center" prop="replacedDepartment" />
      <el-table-column label="替领原因" align="center" prop="reasonForSubstitution" />
      <el-table-column label="出库原因" align="center" prop="outboundReason" />
      <el-table-column label="照片" align="center" prop="photo" />
      <el-table-column label="是否寄冻" align="center" prop="sendFrozenGoods" />
      <el-table-column label="调拨仓库" align="center" prop="transferWarehouse" />
      <el-table-column label="寄冻仓库" align="center" prop="sendFrozenWarehouse" />
      <el-table-column label="销售订单编码" align="center" prop="salesOrderCode" />
      <el-table-column label="销售出库单编号" align="center" prop="salesOutboundOrderNumber" />
      <el-table-column label="采购订单编号" align="center" prop="purchaseOrderNumber" />
      <el-table-column label="采购需求" align="center" prop="procurementRequirements" />
      <el-table-column label="订单日期" align="center" prop="orderDate" />
      <el-table-column label="预计到货日期" align="center" prop="expectedDeliveryDate" />
      <el-table-column label="客户名称" align="center" prop="cusName" />
      <el-table-column label="产品名称" align="center" prop="productName" />
      <el-table-column label="生产订单编号" align="center" prop="proOrderNumber" />
      <el-table-column label="订单日期" align="center" prop="proOrderDate" />
      <el-table-column label="产品需求总数(pcs-瓶/碗)" align="center" prop="totalProductDemand" />
      <el-table-column label="产品编码" align="center" prop="productCode" />
      <el-table-column label="提交人所属部门" align="center" prop="submitterDept" />
      <el-table-column label="生产领料单编号" align="center" prop="proPickingCode" />
      <el-table-column label="外协加工编码" align="center" prop="outProcessCode" />
      <el-table-column label="供应商名称" align="center" prop="supplierName" />
      <el-table-column label="供应商编码" align="center" prop="supplierCode" />
      <el-table-column label="合计出库(件数)" align="center" prop="totalOutbound" />
      <el-table-column label="零头求整(件数)" align="center" prop="zeroToWhole" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="发货出库客户" align="center" prop="deliveryOutboundCus" />
      <el-table-column label="物流平台" align="center" prop="logisticsPlatform" />
      <el-table-column label="发货日期" align="center" prop="issuanceDate" />
      <el-table-column label="司机人名" align="center" prop="driversName" />
      <el-table-column label="车牌号" align="center" prop="licensePlateNum" />
      <el-table-column label="司机联系电话" align="center" prop="driversContactPhoneNum" />
      <el-table-column label="车型" align="center" prop="vehicleModel" />
      <el-table-column label="车辆备注" align="center" prop="vehicleRemarks" />
      <el-table-column label="客户所属仓" align="center" prop="cusWarehouse" />
      <el-table-column label="出库状态" align="center" prop="outboundStatus" />
      <el-table-column label="确认出库时间" align="center" prop="confirmDeliveryTime" />
      <el-table-column label="出库确认人" align="center" prop="outboundPersonnel" />
      <el-table-column label="跟单状态" align="center" prop="trackingStatus" />
      <el-table-column label="单据回传图片" align="center" prop="documentReturnImage" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.documentReturnImage" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="跟单员" align="center" prop="tracker" />
      <el-table-column label="跟单备注" align="center" prop="trackingRemarks" />
      <el-table-column label="部门状态" align="center" prop="status" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"></el-table-column>
      </el-table>

        <!-- 对话框 -->
           <el-dialog :visible.sync="dialogVisible" title="出库详情" width="80%">
             <el-tabs type="border-card" v-if="form.serialNumber != null">
               <el-tab-pane label="物料明细">
                 <el-table :data="issueList" style="width: 100%">
                   <el-table-column prop="subSerialNumber" label="出库单号"></el-table-column>
                   <el-table-column prop="issueMaterialName" label="物料名称"></el-table-column>
                   <el-table-column prop="issueMaterialCode" label="物料编号"></el-table-column>
                   <el-table-column prop="issueSpecModel" label="规格型号"></el-table-column>

                   <!-- 其他列 -->
                 </el-table>
               </el-tab-pane>
               <el-tab-pane label="采购订单明细">
                 <el-table :data="purcList" style="width: 100%">
                   <el-table-column prop="purcSupplierCode" label="供应商编码"></el-table-column>
                   <el-table-column prop="purcSupplierName" label="供应商名称"></el-table-column>
                   <el-table-column prop="purcMaterialName" label="物料名称"></el-table-column>
                   <el-table-column prop="purcMaterialCode" label="物料编码"></el-table-column>
                   <!-- 其他列 -->
                 </el-table>
               </el-tab-pane>
             </el-tabs>
             <span slot="footer" class="dialog-footer">
               <el-button @click="dialogVisible = false">关闭</el-button>
             </span>
           </el-dialog>



        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['mes:wm:outbound:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['mes:wm:outbound:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改出库列表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="出库类型
" prop="outboundType">
          <el-select v-model="form.outboundType" placeholder="请选择出库类型
">
            <el-option label="请选择字典生成" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="流水号" prop="serialNumber">
          <el-input v-model="form.serialNumber" placeholder="请输入流水号" />
        </el-form-item>
        <el-form-item label="出库数据汇总" prop="sumOfOutboundData">
          <el-input v-model="form.sumOfOutboundData" placeholder="请输入出库数据汇总" />
        </el-form-item>
        <el-form-item label="物料列表" prop="materialList">
          <el-input v-model="form.materialList" placeholder="请输入物料列表" />
        </el-form-item>
        <el-form-item label="出库产线" prop="outboundProductionLine">
          <el-input v-model="form.outboundProductionLine" placeholder="请输入出库产线" />
        </el-form-item>
        <el-form-item label="是否替领" prop="substituteCollarOr">
          <el-input v-model="form.substituteCollarOr" placeholder="请输入是否替领" />
        </el-form-item>
        <el-form-item label="被替领部门" prop="replacedDepartment">
          <el-input v-model="form.replacedDepartment" placeholder="请输入被替领部门" />
        </el-form-item>
        <el-form-item label="替领原因" prop="reasonForSubstitution">
          <el-input v-model="form.reasonForSubstitution" placeholder="请输入替领原因" />
        </el-form-item>
        <el-form-item label="出库原因" prop="outboundReason">
          <el-input v-model="form.outboundReason" placeholder="请输入出库原因" />
        </el-form-item>
        <el-form-item label="照片" prop="photo">
          <el-input v-model="form.photo" placeholder="请输入照片" />
        </el-form-item>
        <el-form-item label="是否寄冻" prop="sendFrozenGoods">
          <el-input v-model="form.sendFrozenGoods" placeholder="请输入是否寄冻" />
        </el-form-item>
        <el-form-item label="调拨仓库" prop="transferWarehouse">
          <el-input v-model="form.transferWarehouse" placeholder="请输入调拨仓库" />
        </el-form-item>
        <el-form-item label="寄冻仓库" prop="sendFrozenWarehouse">
          <el-input v-model="form.sendFrozenWarehouse" placeholder="请输入寄冻仓库" />
        </el-form-item>
        <el-form-item label="销售订单编码" prop="salesOrderCode">
          <el-input v-model="form.salesOrderCode" placeholder="请输入销售订单编码" />
        </el-form-item>
        <el-form-item label="销售出库单编号" prop="salesOutboundOrderNumber">
          <el-input v-model="form.salesOutboundOrderNumber" placeholder="请输入销售出库单编号" />
        </el-form-item>
        <el-form-item label="采购订单编号" prop="purchaseOrderNumber">
          <el-input v-model="form.purchaseOrderNumber" placeholder="请输入采购订单编号" />
        </el-form-item>
        <el-form-item label="采购需求" prop="procurementRequirements">
          <el-input v-model="form.procurementRequirements" placeholder="请输入采购需求" />
        </el-form-item>
        <el-form-item label="订单日期" prop="orderDate">
          <el-input v-model="form.orderDate" placeholder="请输入订单日期" />
        </el-form-item>
        <el-form-item label="预计到货日期" prop="expectedDeliveryDate">
          <el-input v-model="form.expectedDeliveryDate" placeholder="请输入预计到货日期" />
        </el-form-item>
        <el-form-item label="客户名称" prop="cusName">
          <el-input v-model="form.cusName" placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="生产订单编号" prop="proOrderNumber">
          <el-input v-model="form.proOrderNumber" placeholder="请输入生产订单编号" />
        </el-form-item>
        <el-form-item label="订单日期" prop="proOrderDate">
          <el-input v-model="form.proOrderDate" placeholder="请输入订单日期" />
        </el-form-item>
        <el-form-item label="产品需求总数(pcs-瓶/碗)" prop="totalProductDemand">
          <el-input v-model="form.totalProductDemand" placeholder="请输入产品需求总数(pcs-瓶/碗)" />
        </el-form-item>
        <el-form-item label="产品编码" prop="productCode">
          <el-input v-model="form.productCode" placeholder="请输入产品编码" />
        </el-form-item>
        <el-form-item label="提交人所属部门" prop="submitterDept">
          <el-input v-model="form.submitterDept" placeholder="请输入提交人所属部门" />
        </el-form-item>
        <el-form-item label="生产领料单编号" prop="proPickingCode">
          <el-input v-model="form.proPickingCode" placeholder="请输入生产领料单编号" />
        </el-form-item>
        <el-form-item label="外协加工编码" prop="outProcessCode">
          <el-input v-model="form.outProcessCode" placeholder="请输入外协加工编码" />
        </el-form-item>
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="form.supplierName" placeholder="请输入供应商名称" />
        </el-form-item>
        <el-form-item label="供应商编码" prop="supplierCode">
          <el-input v-model="form.supplierCode" placeholder="请输入供应商编码" />
        </el-form-item>
        <el-form-item label="合计出库(件数)" prop="totalOutbound">
          <el-input v-model="form.totalOutbound" placeholder="请输入合计出库(件数)" />
        </el-form-item>
        <el-form-item label="零头求整(件数)" prop="zeroToWhole">
          <el-input v-model="form.zeroToWhole" placeholder="请输入零头求整(件数)" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="发货出库客户" prop="deliveryOutboundCus">
          <el-input v-model="form.deliveryOutboundCus" placeholder="请输入发货出库客户" />
        </el-form-item>
        <el-form-item label="物流平台" prop="logisticsPlatform">
          <el-input v-model="form.logisticsPlatform" placeholder="请输入物流平台" />
        </el-form-item>
        <el-form-item label="发货日期" prop="issuanceDate">
          <el-input v-model="form.issuanceDate" placeholder="请输入发货日期" />
        </el-form-item>
        <el-form-item label="司机人名" prop="driversName">
          <el-input v-model="form.driversName" placeholder="请输入司机人名" />
        </el-form-item>
        <el-form-item label="车牌号" prop="licensePlateNum">
          <el-input v-model="form.licensePlateNum" placeholder="请输入车牌号" />
        </el-form-item>
        <el-form-item label="司机联系电话" prop="driversContactPhoneNum">
          <el-input v-model="form.driversContactPhoneNum" placeholder="请输入司机联系电话" />
        </el-form-item>
        <el-form-item label="车型" prop="vehicleModel">
          <el-input v-model="form.vehicleModel" placeholder="请输入车型" />
        </el-form-item>
        <el-form-item label="车辆备注" prop="vehicleRemarks">
          <el-input v-model="form.vehicleRemarks" placeholder="请输入车辆备注" />
        </el-form-item>
        <el-form-item label="客户所属仓" prop="cusWarehouse">
          <el-input v-model="form.cusWarehouse" placeholder="请输入客户所属仓" />
        </el-form-item>
        <el-form-item label="出库状态">
          <el-radio-group v-model="form.outboundStatus">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="确认出库时间" prop="confirmDeliveryTime">
          <el-input v-model="form.confirmDeliveryTime" placeholder="请输入确认出库时间" />
        </el-form-item>
        <el-form-item label="出库确认人" prop="outboundPersonnel">
          <el-input v-model="form.outboundPersonnel" placeholder="请输入出库确认人" />
        </el-form-item>
        <el-form-item label="跟单状态">
          <el-radio-group v-model="form.trackingStatus">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="单据回传图片">
          <image-upload v-model="form.documentReturnImage"/>
        </el-form-item>
        <el-form-item label="跟单员" prop="tracker">
          <el-input v-model="form.tracker" placeholder="请输入跟单员" />
        </el-form-item>
        <el-form-item label="跟单备注" prop="trackingRemarks">
          <el-input v-model="form.trackingRemarks" placeholder="请输入跟单备注" />
        </el-form-item>
        <el-form-item label="部门状态">
          <el-radio-group v-model="form.status">
            <el-radio label="1">请选择字典生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="删除标志" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
        </el-form-item>
        <el-divider content-position="center">出库列表-物料详情信息</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddWmOutboundListIssue">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteWmOutboundListIssue">删除</el-button>
          </el-col>
        </el-row>
        <el-table :data="wmOutboundListIssueList" :row-class-name="rowWmOutboundListIssueIndex" @selection-change="handleWmOutboundListIssueSelectionChange" ref="wmOutboundListIssue">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" align="center" prop="index" width="50"/>
          <el-table-column label="关联主表-流水号" prop="subSerialNumber" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.subSerialNumber" placeholder="请输入关联主表-流水号" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.工单-批次号" prop="issueWorkorderBatchnum" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueWorkorderBatchnum" placeholder="请输入出库明细.工单-批次号" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.销售数量" prop="issueSalesQuantity" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueSalesQuantity" placeholder="请输入出库明细.销售数量" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.销售单价(PCS/元)" prop="issueSalesUnitPrice" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueSalesUnitPrice" placeholder="请输入出库明细.销售单价(PCS/元)" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.委托单合同编码" prop="issueContractCode" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueContractCode" placeholder="请输入出库明细.委托单合同编码" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.订单签订日期" prop="issueSigningDate" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueSigningDate" placeholder="请输入出库明细.订单签订日期" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.销售订单编码" prop="issueSalesOrderCode" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueSalesOrderCode" placeholder="请输入出库明细.销售订单编码" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.所属仓库" prop="issueWarehouse" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueWarehouse" placeholder="请输入出库明细.所属仓库" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.客户" prop="issueCus" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueCus" placeholder="请输入出库明细.客户" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.物料名称" prop="issueMaterialName" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueMaterialName" placeholder="请输入出库明细.物料名称" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.物料编码" prop="issueMaterialCode" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueMaterialCode" placeholder="请输入出库明细.物料编码" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.剩余库存数量" prop="issueInventoryQuantity" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueInventoryQuantity" placeholder="请输入出库明细.剩余库存数量" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.出库数量" prop="issueOutboundQuantity" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueOutboundQuantity" placeholder="请输入出库明细.出库数量" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.物料类型" prop="issueMaterialType" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.issueMaterialType" placeholder="请选择出库明细.物料类型">
                <el-option label="请选择字典生成" value="" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="出库明细.规格型号" prop="issueSpecModel" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueSpecModel" placeholder="请输入出库明细.规格型号" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.单位" prop="issueCompany" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueCompany" placeholder="请输入出库明细.单位" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.单箱(瓶/碗)数" prop="issueSingleBoxNum" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueSingleBoxNum" placeholder="请输入出库明细.单箱(瓶/碗)数" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.换算领用量(件/箱/包)" prop="issueConversionNumSlave" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueConversionNumSlave" placeholder="请输入出库明细.换算领用量(件/箱/包)" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.换算领用量(主单位)" prop="issueConversionNumMaster" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueConversionNumMaster" placeholder="请输入出库明细.换算领用量(主单位)" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.零头求整(件数)" prop="issueZeroToWhole" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueZeroToWhole" placeholder="请输入出库明细.零头求整(件数)" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.备注" prop="issueRemark" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueRemark" placeholder="请输入出库明细.备注" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.批次日期" prop="issueBatchDate" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueBatchDate" placeholder="请输入出库明细.批次日期" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.批次号" prop="issueBatchNum" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueBatchNum" placeholder="请输入出库明细.批次号" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.批次库存" prop="issueBatchInventory" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueBatchInventory" placeholder="请输入出库明细.批次库存" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.安全库存" prop="issueSafetyStock" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueSafetyStock" placeholder="请输入出库明细.安全库存" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.出库后批次库存" prop="issueBatchInventoryAfter" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueBatchInventoryAfter" placeholder="请输入出库明细.出库后批次库存" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.已退货数量" prop="issueReturnedQuantity" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueReturnedQuantity" placeholder="请输入出库明细.已退货数量" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.总退货数" prop="issueTotalReturnsNum" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueTotalReturnsNum" placeholder="请输入出库明细.总退货数" />
            </template>
          </el-table-column>
          <el-table-column label="出库明细.易耗品类型" prop="issueConsumablesTypes" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.issueConsumablesTypes" placeholder="请输入出库明细.易耗品类型" />
            </template>
          </el-table-column>
          <el-table-column label="部门状态" prop="status" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.status" placeholder="请选择部门状态">
                <el-option label="请选择字典生成" value="" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<style scoped>.highlight-column {
  background-color: #f0f9eb; /* 背景颜色 */
}

.highlight-link {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}
</style>


<script>
import { listOutbound, getOutbound, delOutbound, addOutbound, updateOutbound ,syncWmOutbound,getIssueList,getPurcList} from "@/api/mes/wm/outbound";

export default {
  name: "Outbound",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedWmOutboundListIssue: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 出库列表表格数据
      outboundList: [],
      loading: false,
      queryParams: {},
      dialogVisible: false,
      form: {},
      issueList: [],
      purcList: [],



      // 出库列表-物料详情表格数据
      wmOutboundListIssueList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        outboundType: null,        serialNumber: null,        sumOfOutboundData: null,        materialList: null,        outboundProductionLine: null,        substituteCollarOr: null,        replacedDepartment: null,        reasonForSubstitution: null,        outboundReason: null,        photo: null,        sendFrozenGoods: null,        transferWarehouse: null,        sendFrozenWarehouse: null,        salesOrderCode: null,        salesOutboundOrderNumber: null,        purchaseOrderNumber: null,        procurementRequirements: null,        orderDate: null,        expectedDeliveryDate: null,        cusName: null,        productName: null,        proOrderNumber: null,        proOrderDate: null,        totalProductDemand: null,        productCode: null,        submitterDept: null,        proPickingCode: null,        outProcessCode: null,        supplierName: null,        supplierCode: null,        totalOutbound: null,        zeroToWhole: null,        deliveryOutboundCus: null,        logisticsPlatform: null,        issuanceDate: null,        driversName: null,        licensePlateNum: null,        driversContactPhoneNum: null,        vehicleModel: null,        vehicleRemarks: null,        cusWarehouse: null,        outboundStatus: null,        confirmDeliveryTime: null,        outboundPersonnel: null,        trackingStatus: null,        documentReturnImage: null,        tracker: null,        trackingRemarks: null,        status: null,      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询出库列表列表 */
    getList() {
      this.loading = true;
      listOutbound(this.queryParams).then(response => {
        this.outboundList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },


    handleSerialNumberClick(serialNumber) {
      console.log("serialNumber>>"+serialNumber)
         this.dialogVisible = true;
         this.form.serialNumber = serialNumber;
         this.getIssueList(serialNumber);
         this.getPurcList(serialNumber);
       },
       getIssueList(serialNumber) {
         console.log("getIssueList>>"+serialNumber)
         getIssueList({ serialNumber }).then(response => {
           this.issueList = response.rows;
         });
       },
       getPurcList(serialNumber) {
             getPurcList({ serialNumber }).then(response => {
               this.purcList = response.rows;
             });
           },



    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        sequenceNum: null,        outboundId: null,        outboundType: null,        serialNumber: null,        sumOfOutboundData: null,        materialList: null,        outboundProductionLine: null,        substituteCollarOr: null,        replacedDepartment: null,        reasonForSubstitution: null,        outboundReason: null,        photo: null,        sendFrozenGoods: null,        transferWarehouse: null,        sendFrozenWarehouse: null,        salesOrderCode: null,        salesOutboundOrderNumber: null,        purchaseOrderNumber: null,        procurementRequirements: null,        orderDate: null,        expectedDeliveryDate: null,        cusName: null,        productName: null,        proOrderNumber: null,        proOrderDate: null,        totalProductDemand: null,        productCode: null,        submitterDept: null,        proPickingCode: null,        outProcessCode: null,        supplierName: null,        supplierCode: null,        totalOutbound: null,        zeroToWhole: null,        remark: null,        deliveryOutboundCus: null,        logisticsPlatform: null,        issuanceDate: null,        driversName: null,        licensePlateNum: null,        driversContactPhoneNum: null,        vehicleModel: null,        vehicleRemarks: null,        cusWarehouse: null,        outboundStatus: "0",        confirmDeliveryTime: null,        outboundPersonnel: null,        trackingStatus: "0",        documentReturnImage: null,        tracker: null,        trackingRemarks: null,        status: "0",        delFlag: null,        createBy: null,        createTime: null,        updateBy: null,        updateTime: null      };
      this.wmOutboundListIssueList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.serialNumber)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加出库列表";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const sequenceNum = row.sequenceNum || this.ids
      getOutbound(sequenceNum).then(response => {
        this.form = response.data;
        this.wmOutboundListIssueList = response.data.wmOutboundListIssueList;
        this.open = true;
        this.title = "修改出库列表";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.wmOutboundListIssueList = this.wmOutboundListIssueList;
          if (this.form.sequenceNum != null) {
            updateOutbound(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOutbound(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const serialNumber = row.serialNumber || this.ids;
      this.$modal.confirm('是否确认删除出库列表编号为"' + serialNumber + '"的数据项？').then(function() {
        return delOutbound(serialNumber);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
	/** 出库列表-物料详情序号 */
    rowWmOutboundListIssueIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 出库列表-物料详情添加按钮操作 */
    handleAddWmOutboundListIssue() {
      let obj = {};
      obj.subSerialNumber = "";
      obj.issueWorkorderBatchnum = "";
      obj.issueSalesQuantity = "";
      obj.issueSalesUnitPrice = "";
      obj.issueContractCode = "";
      obj.issueSigningDate = "";
      obj.issueSalesOrderCode = "";
      obj.issueWarehouse = "";
      obj.issueCus = "";
      obj.issueMaterialName = "";
      obj.issueMaterialCode = "";
      obj.issueInventoryQuantity = "";
      obj.issueOutboundQuantity = "";
      obj.issueMaterialType = "";
      obj.issueSpecModel = "";
      obj.issueCompany = "";
      obj.issueSingleBoxNum = "";
      obj.issueConversionNumSlave = "";
      obj.issueConversionNumMaster = "";
      obj.issueZeroToWhole = "";
      obj.issueRemark = "";
      obj.issueBatchDate = "";
      obj.issueBatchNum = "";
      obj.issueBatchInventory = "";
      obj.issueSafetyStock = "";
      obj.issueBatchInventoryAfter = "";
      obj.issueReturnedQuantity = "";
      obj.issueTotalReturnsNum = "";
      obj.issueConsumablesTypes = "";
      obj.status = "";
      this.wmOutboundListIssueList.push(obj);
    },
    /** 出库列表-物料详情删除按钮操作 */
    handleDeleteWmOutboundListIssue() {
      if (this.checkedWmOutboundListIssue.length == 0) {
        this.$modal.msgError("请先选择要删除的出库列表-物料详情数据");
      } else {
        const wmOutboundListIssueList = this.wmOutboundListIssueList;
        const checkedWmOutboundListIssue = this.checkedWmOutboundListIssue;
        this.wmOutboundListIssueList = wmOutboundListIssueList.filter(function(item) {
          return checkedWmOutboundListIssue.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleWmOutboundListIssueSelectionChange(selection) {
      this.checkedWmOutboundListIssue = selection.map(item => item.index)
    },
    /** 同步数据按钮操作 */
    handleSync() {
            if(this.loading){
              this.$modal.message("正常进行中，请不要重复点击...")
            }
            this.loading = true;
            this.$modal.confirm('是否确认同步数据？').then(function() {
              return syncWmOutbound();
            }).then(() => {
              this.getList();
              this.$modal.msgSuccess("同步成功");
            }).catch(() => {});
          },
    /** 导出按钮操作 */
    handleExport() {
      this.download('wm/outbound/export', {
        ...this.queryParams
      }, `outbound_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
